<!-- 团期余位管理 -->
<template>
  <div class="group_remain_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <span></span>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-select v-model="base" @change="searchBase" placeholder="请选择基地" clearable>
              <el-option v-for="(item, index) in baseOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="name" @keyup[native].enter="searchName" @change="searchName" placeholder="产品名称" clearable :suffix-icon="Search" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="code" @keyup[native].enter="searchCode" @change="searchCode" placeholder="产品编码" clearable :suffix-icon="Search" />
          </el-form-item>
        </el-form>
      </div>
      <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>
  </div>
</template>

<script setup>
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, COLUMN_TYPE, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useRoute from "@util/router";
import api from "@api/groupRemain"
import $ from "@util/base"
import { $msg } from '@/common/ui/msg';

const route = useRoute()

const baseOptions = ref([])

getConfig()
function getConfig() {
  api.base(val => {
    baseOptions.value = val
  })
}

const total = ref(0)
const data = ref([])
const base = ref(route.query().base || '')
const name = ref(route.query().name || '')
const code = ref(route.query().code || '')

function searchBase(val) {
  route.replaceQuery('base', val)
}

function searchName(val) {
  route.replaceQuery('name', val)
}

function searchCode(val) {
  route.replaceQuery('code', val)
}

function getOperations() {
  return [OPERATIONS.viewDetails]
}

const tableConfig = {
  showIndex: true,
  operations: {
    label: '操作',
    width: 120,
    operations: getOperations
  },
  column: [
    {
      label: '产品图片',
      prop: 'mainPic',
      type: COLUMN_TYPE.picture,
      width: 100,
    }, {
      label: '产品名称',
      prop: 'travelName',
    }, {
      label: '产品编号',
      prop: 'travelCode',
      width: 150,
    }, {
      label: '现有团期',
      prop: 'nowGroupNum',
      width: 150,
    }, {
      label: '发团日期',
      prop: 'startGroupTime',
      width: 150,
    }, {
      label: '结束日期',
      prop: 'endGroupTime',
      width: 150,
    }, {
      label: '基地所属',
      prop: 'shopName',
      width: 150,
    }
  ]
}

const opHander = operationsHander();
opHander.install(OP_KEY.viewDetails, (data) => {
  route.push({ name: 'groupremainorder', query: { code: data.travelCode } })
});

getData()
route.watchRouter("groupremainmanager", () => { getData() })

function getData() {
  let routeQuery = route.query()
  api.manageList({
    shopCode: routeQuery.base,
    name: routeQuery.name,
    code: routeQuery.code,
    page: routeQuery.p,
    size: routeQuery.s
  }, val => {
    data.value = val.itemList
    total.value = val.total
  })
}

function close() {
  
}
</script>